<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page layout - Professor - before check-in</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style/professor.css') }}">
</head>

<body>
    <div id="app" class="sign-in">
        <div class="sign-in-con">
            <div class="sign-header">
                <div class="sign-left">
                    <span class="sign-logo">logo</span>
                    <span class="sign-school">{{ school }}</span>
                </div>
                <div class="sign-right">
                    <p class="sign-pic-c">
                        <img src="{{ url_for('get_avatar', filename=user.avatar) }}" alt="">
                    </p>
                    <div class="sign-center">
                        <p class="sign-hi">Hi, {{ user.name }}</p>
                        <p class="sign-1">welcome to {{ school }} school，keep good work</p>
                    </div>
                </div>
                <input class="sign-h-input" type="text" placeholder="search">
            </div>
            {% if timetables | length > 0 %}
                <div id='{{ timetables[0].id }}' ref='current' class="sign-up">
                    <div class="sign-up-left">
                        <div class="sign-up-c">
                            <p class="sign-up-text">Courses details</p>
                            <p class="sign-up-img"></p>
                        </div>
                        <div class="sign-up-con">
                            <p class="sign-up-cour">
                                {{ timetables[0].course.name }} - {{ timetables[0].title }}
                                <span class="sign-up-time">({{ strftime(timetables[0].start_time) }} — {{ strftime(timetables[0].end_time) }})</span>
                            </p>
                            <div class="sign-up-lists">
                                <p>
                                    <span class="sign-up-circle"></span>
                                    {{ timetables[0].course.lessons }} lesson
                                </p>
                                <p>
                                    <span class="sign-up-circle"></span>
                                    {{ timetables[0].course.duration }} min
                                </p>
                                <p>
                                    <span class="sign-up-circle"></span>
                                    5 assignment
                                </p>
                                <p>
                                    <span class="sign-up-circle"></span>
                                    {{ timetables[0].course.number_of_students }} student
                                </p>
                            </div>
                            <p v-if="showStartCourse">
                                <button @click="startCourse" class="sign-up-btn">${ startText }$</button>
                            </p>
                        </div>
                    </div>
                    <div class="sign-up-right">
                        <div class="sign-up-tims">
                            <p class="sign-up-number">
                                <span>{{ timetables[0].number_of_sign_in }}</span>
                                <span>/{{ timetables[0].course.number_of_students }}</span>
                            </p>
                            <p class="sign-up-right-tips">student</p>
                        </div>
                        <p>
                            <button @click="countdown" :disabled="disable" class="sign-up-start-btn">
                                ${ signInText }$
                            </button>
                        </p>
                    </div>
                </div>
            {% endif %}

            <div class="sign-cons">
                <p class="sign-title">Upcoming class</p>
                <div class="sign-con-lists">
                    {% for timetable in timetables %}
                        <div class="sign-con-list">
                            <div>
                                <p class="sign-con-pic"></p>
                                <div class="sign-con-right">
                                    <p class="sign-con-title">
                                        {{ timetable.course.name }} - {{ timetable.title }}
                                    </p>
                                    <p class="sign-con-tip">
                                        {{ timetable.place }}
                                    </p>
                                    <div class="sign-con-tips">
                                        <p>
                                            <span class="sign-con-circle"></span>
                                            {{ timetable.course.progress }}/{{ timetable.course.lessons }} lesson
                                        </p>
                                        <p>
                                            <span class="sign-con-circle"></span>
                                            {{ timetable.course.duration }} min
                                        </p>
                                        <p>
                                            <span class="sign-con-circle"></span>
                                            5 assignment
                                        </p>
                                        <p>
                                            <span class="sign-con-circle"></span>
                                            {{ timetable.course.number_of_students }} student
                                        </p>
                                    </div>
                                    <p>
                                        <a href="{{ url_for('course.get_lesson', id=timetable.id) }}">
                                            <button class="sign-con-btn">Course Details</button>
                                        </a>
                                    </p>
                                </div>
                            </div>

                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="sign-in-side">
            <ul class="sign-side-list">
                <li class="active">
                    <span class="sign-icon"></span>
                    dashboard
                </li>
                <li class="no-open">
                    <span class="sign-icon"></span>
                    messenger
                </li>
                <li class="no-open">
                    <span class="sign-icon"></span>
                    calendar
                </li>
            </ul>
            <ul class="sign-side-list">
                <li class="no-open">
                    <span class="sign-icon"></span>
                    attendance
                </li>
                <li class="no-open">
                    <span class="sign-icon"></span>
                    Material upload
                </li>
            </ul>
            <ul class="sign-side-list">
                <li class="no-open">
                    <span class="sign-icon"></span>
                    homework
                </li>
                <li class="no-open">
                    <span class="sign-icon"></span>
                    settings
                </li>
            </ul>
            <a href="{{ url_for('auth.login') }}" class="signOut">
                <img class="signup" src="{{ url_for('static', filename='mobile/img/signup.svg') }}" alt="" />
                sign out
            </a>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.prod.min.js"></script>
    <script>
        Vue.createApp({
            delimiters: ["${", "}$"],
            data() {
                return {
                    cd: 300,
                    counter: 0,
                    current: null,
                    disable: true,
                    interval: null,
                    signInText: 'Initiate sign-in'
                }
            },
            mounted() {
                this.getCurrent()
                setInterval(() => {
                    if (this.counter <= 0) {
                        return
                    }
                    this.counter--
                    this.signInText = this.formatTime(this.counter)
                    if (this.counter <= 0) {
                        this.signInText = 'End sign-in'
                    }
                }, 1000)
            },
            computed: {
                startText() {
                    if (!this.current) {
                        return ''
                    }
                    switch (this.current.state) {
                        case 'signing_in':
                            return 'Start Course'
                        case 'started':
                            return 'End Course'
                        case 'finished':
                            return 'Course is over'
                        default:
                            return ''
                    }      
                },
                showStartCourse() {
                    if (!this.current) {
                        return false
                    }
                    return this.current.state !== 'not_started'
                }
            },
            methods: {
                countdown() {
                    if (!this.current || this.current.state !== 'not_started') {
                        return
                    }

                    this.disable = true
                    axios.put('/data/lesson/' + this.current.id + '/open').then((response) => {
                        this.getCurrent()
                    }).catch(function (error) {
                        this.disable = false
                        console.info(error)
                    })
                },
                getCurrent() {
                    var current = this.$refs.current
                    if (!current) {
                        return null
                    }

                    var id = parseInt(this.$refs.current.id)
                    axios.get('/data/lesson/' + id).then((response) => {
                        this.current = response.data
                        this.disable = this.current.state !== 'not_started'
                        if (this.current.state === 'finished') {
                            this.counter = 0
                            this.signInText = 'End sign-in'
                        }
                        if (this.current.open_time && this.current.state !== 'finished') {
                            var now = parseInt(new Date() / 1000)
                            var close = parseInt(new Date(this.current.open_time) / 1000) + this.cd
                            if (now < close) {
                                this.counter = close - now
                                this.signInText = this.formatTime(this.counter)
                            } else {
                                this.counter = 0
                                this.signInText = 'End sign-in'
                            }
                        }
                    }).catch(function (error) {
                        console.info(error)
                    })
                },
                endCourse() {
                    if (!this.current || this.current.state !== 'started') {
                        return
                    }

                    axios.put('/data/lesson/' + this.current.id + '/end').then((response) => {
                        this.counter = 0
                        this.signInText = 'End sign-in'
                        this.current = response.data
                    }).catch(function (error) {
                        console.info(error)
                    })
                },
                startCourse() {
                    this.endCourse()
                    if (!this.current || this.current.state !== 'signing_in') {
                        return
                    }

                    axios.put('/data/lesson/' + this.current.id + '/start').then((response) => {
                        this.current = response.data
                    }).catch(function (error) {
                        console.info(error)
                    })
                },
                formatTime(seconds) {
                    m = parseInt(seconds / 60)
                    s = parseInt(seconds % 60)
                    if (m < 10) m = '0' + m
                    if (s < 10) s = '0' + s
                    return m + ':' + s
                },
            }
        }).mount('#app')
    </script>
</body>

</html>